<template>
  <div class="add">
    <div class="type">
      <span class="iconfont" @click="goto()">&#xe779;</span>
      添加收货地址
    </div>
    <div class="inp">
      <div>
        <p>收货人</p>
        <input v-model="name" type="text" name="" id="" />
      </div>
      <div>
        <p>联系电话</p>
        <input v-model="dh" type="text" name="" id="" />
      </div>
      <div>
        <p>所在地址</p>
        <span @click="xz()" class="iconfont">{{ dq }} &#xe775;</span>
      </div>
      <div>
        <p>详细地址</p>
        <input v-model="xx" type="text" name="" id="" />
      </div>
      <v-distpicker
        @province="onChangeProvince"
        @city="onChangeCity"
        @area="onChangeArea"
        type="mobile"
        v-if="is"
      ></v-distpicker>
    </div>
    <div class="bot">
      <button @click="iftrue(), add(obj)">保存</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.add {
  .type {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: rgb(116, 116, 116);
    text-align: center;
    background-color: white;
    span {
      position: absolute;
      display: block;
      height: 50px;
      width: 40px;
    }
    a {
      display: block;
      span {
        position: absolute;
        display: block;
        height: 50px;
        color: rgb(116, 116, 116);
        font-size: 25px;
        width: 40px;
        right: 0;
        top: 0;
      }
    }
  }
  .bot {
    position: fixed;
    bottom: 0;
    width: 100%;
    button {
      display: block;
      background-color: rgb(255, 47, 47);
      color: white;
      border: none;
      width: 100%;
      font-size: 18px;
      line-height: 60px;
    }
  }
  .inp {
    margin-top: 50px;
    div {
      width: 100%;
      display: flex;
      height: 50px;
      position: relative;
      border-bottom: 1px solid #ccc;
      p {
        width: 30%;
        line-height: 50px;
        margin-left: 10px;
        font-size: 16px;
      }
      input {
        border: none;
        outline-style: none;
        width: 70%;
      }
      span {
        position: absolute;
        top: 17px;
        right: 10px;
      }
    }
    .distpicker-address-wrapper {
      height: 400px !important;
    }
  }
}
</style>
<script>
import { mapMutations } from "vuex";
import VDistpicker from "v-distpicker";
export default {
  name: "add",
  data() {
    return {
      is: false,
      name: "",
      dh: "",
      dq: "请选择",
      xx: "",
      sh: "",
      obj: {},
    };
  },
  components: { VDistpicker },
  methods: {
    goto() {
      this.$router.go(-1);
    },
    iftrue() {
      this.sh = this.dq + this.xx;
      if (this.name.length >= 2) {
        if (this.dh.length == 11) {
          if (this.sh.length > 8) {
            this.obj.name = this.name;
            this.obj.dh = this.dh;
            this.obj.sh = this.sh;
            this.$router.go(-1);
          } else {
            alert("地址错误");
            return;
          }
        } else {
          alert("电话号码错误");
          return;
        }
      } else {
        alert("名字需不少于2个字");
        return;
      }
    },
    xz() {
      this.is = true;
    },
    onChangeProvince(a) {
      this.dq = "";
      this.dq += a.value;
    },
    onChangeCity(a) {
      this.dq += a.value;
    },
    onChangeArea(a) {
      this.dq += a.value;
      this.is = false;
    },
    ...mapMutations(["add"]),
  },
};
</script>